<template>
	<view class="container">
		<view class="header">
			<input placeholder="请输入关键词" placeholder-class="placeholder" confirm-type="search" @confirm="Search" v-model="nameWen" />
			<image src="../../../static/images//search.png" @tap="Search"></image>
		</view>
		<view style="box-sizing: border-box;height: calc(100vh - 84rpx)">
			<wuc-tab :tab-list="tabList" :textFlex='true' :tabCur="TabCur" @change="tabChange"></wuc-tab>
			<swiper class="list-content" :current="TabCur" duration="300" @change="changeTab">
				<swiper-item v-for="(item,index) in tabList" :key="index">
					<scroll-view style="height: 88vh;padding-bottom: 30rpx;" scroll-y="true">
						<view class="main-item" v-for="(item, idx) in list" :key="idx" @tap="storeDetail(item.wenid, item.qusType)">
							<view class="item-top flex">
								<view class="top-left flex">
									<text>{{item.namewenid}}</text>
									<span v-if="index == 0">共{{item.zongshu}}题</span>
								</view>
								<view class="top-right flex">
									<text :class="[item.fa==2?'showstate': '']"></text>
									<span>{{item.fa==1 ? '未发布' : (item.fa == 2 ? '发布中' : '结束发布')}}</span>
								</view>
							</view>
							<view class="main-show flex" v-if="item.fa==1?false:true">
								<view v-if="item.type" class="show-right">
									<text>问卷类型:</text>
									<span>{{item.type == 1 ? '调查问卷' : (item.type == 2 ? '表单问卷' : '投票问卷')}}</span>
								</view>
							</view>
							<view class="main-show flex" v-if="item.fa==1?false:true">
								<view class="show-left">
									<text>答卷人数:</text>
									<span>{{item.darenshu}}</span>
								</view>
								<view class="show-right">
									<text>有效答卷数:</text>
									<span>{{item.youxiaojuan}}</span>
								</view>
							</view>
							<view class="item-content">{{item.text ? item.text : ''}}</view>
							<view class="item-bottom flex">
								<view class="bottom-left">
									<text>创建时间:</text>
									<span>{{item.date}}</span>
								</view>
								<view class="bottom-left">
									<text>{{item.state==2?'结束时间':'修改时间'}}:</text>
									<span>{{item.update ? item.update : ''}}</span>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"

	import api from '@/common/api.js'

	export default {
		components: {
			WucTab,
			uniList,
			uniListItem
		},
		data() {
			return {
				TabCur: 0,
				tabList: [{
					name: '我创建的'
				}, {
					name: '我回答的'
				}, {
					name: '我收藏的'
				}],
				page: 1,
				list: [],  //列表数据
				nameWen: ''
			}
		},
		methods: {
			tabChange(index) {
				this.TabCur = index;
				this.list = []
				this.nameWen = ''
				this.page = 1
				if (this.TabCur == 0) {
					this.myCreate(this.page)
				} else if (this.TabCur == 1) {
					this.myReplay(this.page)
				} else {
					this.myStore(this.page)
				}
			},
			changeTab(e) {
				this.tabChange(e.detail.current)
			},
			storeDetail(wenid, qusType) {
				uni.navigateTo({
					url: "../../questionHallDetial/questionHallDetial?wenid=" + wenid + "&fromUrl=cang" + '&private=' + true + '&qusType=' + qusType
				})
			},
			// 我创建的
			myCreate(page) {
				let that = this
				api.quesList({
					api: 'wenpeg',
					shu: '',
					table: 3,
					name: this.nameid ? this.nameid : uni.getStorageSync('message')[0].id,
					page: page
				}).then(res => {
					if (res.code == 200) {
						if (res.date.length < 15) {
							that.moreTitle = ""
						}
						that.list = that.list.concat(res.date)
					}
					let arr = this.list
					let newArr = arr.map(item => {
						item.showIcon = false
						item.qusType = 1
						return item
					})
					this.list = newArr
				}).catch(err => {
					console.log(err)
				})
			},
			// 我回答的
			myReplay(page) {
				let that = this
				api.quesList({
					api: 'weilist',
					shu: '',
					table: 3,
					nameid: this.nameid ? this.nameid : uni.getStorageSync('message')[0].id,
					page: page
				}).then(res => {
					if (res.code == 200) {
						if (res.date.length < 15) {
							that.moreTitle = ""
						}
						that.list = that.list.concat(res.date)
					}
					let arr = this.list
					let newArr = arr.map(item => {
						item.showIcon = false
						item.qusType = 2
						return item
					})
					this.list = newArr
				}).catch(err => {
					console.log(err)
				})
			},
			// 我收藏的
			myStore(page) {
				let that = this
				api.quesList({
					api: 'wensou',
					shu: '',
					table: 3,
					page: page,
					nameid: this.nameid ? this.nameid : uni.getStorageSync('message')[0].id
				}).then(res => {
					if (res.code == 200) {
						if (res.date.length < 15) {
							that.moreTitle = ""
						}
						that.list = that.list.concat(res.date)
					}
					let arr = this.list
					let newArr = arr.map(item => {
						item.showIcon = false
						item.qusType = 3
						return item
					})
					this.list = newArr
				}).catch(err => {
					console.log(err)
				})
			},
			// get list
			getList(data) {
				api.quesList(data).then(res => {
					if (res.code == 200) {
						if (res.date.length < 15) {
							this.moreTitle = ""
						}
						this.list = this.list.concat(res.date)
					}
					let arr = this.list
					let newArr = arr.map(item => {
						item.showIcon = false
						item.qusType = 3
						return item
					})
					this.list = newArr
				}).catch(err => {
					console.log(err)
				})
			},
			// 搜索
			Search() {
				this.list = []
				let obj = {
					shu: '',
					namewenid: this.nameWen,
					table: 3,
					nameid: this.nameid ? this.nameid : uni.getStorageSync('message')[0].id
				}
				if(this.TabCur == 3) {
					obj.api = 'wensou'
					this.getList(obj)
				} else if(this.TabCur == 1) {
					obj.api = 'weilist'
					this.getList(obj)
				} else {
					obj.api = 'wenpeg'
					this.getList(obj)
				}
			}
		},
		onReachBottom() {
			this.page++
			if (this.TabCur == 0) {
				this.myCreate(this.page)
			} else if (this.TabCur == 1) {
				this.myReplay(this.page)
			} else {
				this.myStore(this.page)
			}
		},
		onShow() {
			this.nameid = uni.getStorageSync('message')[0].id
			this.list = []
			if (this.TabCur == 0) {
				this.myCreate(this.page)
			} else if (this.TabCur == 1) {
				this.myReplay(this.page)
			} else {
				this.myStore(this.page)
			}
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		background-color: #e6e6e6;
		box-sizing: border-box;
		
		.header {
			width: 100%;
			padding: 20rpx 30rpx 5rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
			
			input {
				flex: 1;
				height: 60rpx;
				line-height: 60rpx;
				background: #F0F0F0;
				border-radius: 30rpx;
				padding-left: 8%;
				box-sizing: border-box;
				font-weight: normal;
				margin-right: 20rpx;
			}
		
			image {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				left: 5%;
				top: 30rpx
			}
		}
		
		.list-content {
			width: 100%;
			box-sizing: border-box;
			height: calc(100% - 90rpx);

			.main-item {
				width: 92%;
				margin: 30rpx auto;
				border-radius: 10rpx;
				background: #FFFFFF;
				padding: 15rpx 20rpx;
				box-sizing: border-box;

				.item-top {
					justify-content: space-between;

					.top-left {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						max-width: 60%;
						text {
							font-size: 36rpx;
							color: #333;
							margin-right: 5rpx;
						}

						span {
							font-size: 24rpx;
							color: #666;
						}
					}

					.top-right {
						width: 18%;
						text {
							width: 15rpx;
							height: 15rpx;
							display: inline-block;
							background: #999;
							border-radius: 50%;
							margin-right: 10rpx;
						}

						span {
							font-size: 20rpx;
							color: #999;
						}

						.showstate {
							background: #42e44a;
						}
					}
				}

			}

			.main-show {
				font-size: 30rpx;
				margin: 10rpx 0;

				.show-left {
					margin-right: 30rpx;

					text {
						color: #333;
						margin-right: 5rpx;
					}

					span {
						color: #209FFC;
					}
				}

				.show-right {
					text {
						color: #333;
						margin-right: 5rpx;
					}

					span {
						color: #209FFC;
					}
				}
			}

			.item-content {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				color: #999;
				font-size: 24rpx;
				line-height: 30rpx;
			}

			.item-bottom {
				font-size: 20rpx;
				line-height: 30rpx;
				color: #666;
				margin: 8rpx 0;

				.bottom-left {
					margin-right: 20rpx;
				}
			}
		}
	}

	swiper {
		height: 88vh;
	}
</style>
